<template>
  <div style="width:100%;height:100%;">
    <div class="dialogTitle">
      <div>超期未执行线路</div>

      <div
        class="dialogMore"
        @click="$router.push('/cms/index/detailedPlanManagement')">
        更多
        <i class="el-icon-d-arrow-right" />
      </div>
    </div>
    <div class="dialogTabs">
      <div />
      <div style="display: flex">
        <div
          v-for="(item, index) in tabs"
          :key="index"
          class="dialogtabLis"
          :class="current == index ? 'dialogTabsAction' : ''"
          @click="current = index">{{ item }}</div>
      </div>
    </div>
    <div class="model3Content">
      <div v-if="data.length" style="height: 100%;">
        <div v-for="(item,index) in data" :key="index" class="model3ContentLeft">
          <div style="width:100%;">{{ item.lineName }}</div>
          <div style="display:flex;width:100%;">
            <el-progress
              :text-inside="true"
              :stroke-width="10"
              :percentage="(item.num / data[0].num) * 100" />
            <div class="model3ContentRighr">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <empty v-else />
    </div>
    <!--  <div style="height:10%" class="remake">（维修建议：累计“补偿装置”发生缺陷次数较多，请重点关注）</div> -->
  </div>
</template>
<script>
import { unexecutedLineTop5 } from '@/api/cms/index/index.js'
import empty from '../empty.vue'
export default {
  components: {
    empty
  },
  props: {
    ctype: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tabs: ['累计', '近一年', '近三月', '近一月'],
      current: 0,
      data: []

    }
  },
  computed: {
    type() {
      return this.current === 0 ? null : this.current === 1 ? 12 : this.current === 2 ? 3 : this.current === 3 ? 1 : ''
    }
  },
  watch: {
    current() {
      this.init()
    },
    railTypes() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      unexecutedLineTop5({
        cType: this.ctype,
        type: this.type,
        railTypeList: this.railTypes.split(',')
      }).then(res => {
        this.data = res.data
      })
    }
  }
}
</script>
<style scoped>
.dialogTitle {
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  height: 50px;
  padding: 0 20px;
}
.dialogMore {
  color: #66ffff;
  cursor: pointer;
}
.dialogTabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 36px;
}
.dialogTabsAction {
  background: #0a2b52 !important;
  border: 1px solid #66ffff !important;
  box-sizing: border-box;
  color: rgba(102, 255, 255, 1) !important;
}
.dialogtabLis {
  padding: 0 12px;
  height: 36px;
  background: #0f1f56;
  border: 1px solid rgba(84, 113, 255, 0.6);
  line-height: 36px;
  text-align: center;
  font-weight: 350;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.model3Content {
  height: calc(90% - 86px);
  padding: 0 20px;
}
/deep/ .el-progress-bar__innerText {
  display: none;
}
/deep/ .el-progress-bar__inner {
  background: linear-gradient(270deg, #4dffdf 0%, #4da1ff 96.35%);
}
/deep/ .el-progress-bar__outer {
  background: #0f1f56;
}
/deep/.el-progress {
  width: 90%;
  height: 12px;
}
.model3ContentRighr {
  font-size: 16px;
  color: #ffffff;
}
.model3ContentLeft {
  font-size: 14px;
  color: #fff;
  height: 20%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.remake {
  font-size: 14px;
  width: 100%;
  text-align: center;
  color: #c0796a;
  line-height: 37px;
}
</style>
